<template>
    <!--帖子信息界面-->
    <div>
        <!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
<!--        <top-nav v-bind:currentUser="currentUser" ></top-nav>-->
        <top-nav @updateUser="setCurrentUser" ></top-nav>
        <el-row justify="center" type="flex">
            <el-col :span="18" :offset="1">
                <searchBar></searchBar>
            </el-col>
        </el-row>

        <!--帖子信息-->
        <el-row justify="center" type="flex" v-if="getPInfoRs.postSuccess">
            <el-col :span="15">
                <!--贴吧信息-->
                <el-row class="color_bg_gray bar_info">
                    <!--左边-->
                    <el-col :span="9">
                        <el-row :gutter="10">
                            <el-col :offset="2" class="margin_top_15" :span="9">
                                <el-image
                                        style="width: 120px; height: 120px"
                                        :src="bar.barImg"
                                        fit="cover"></el-image>
                            </el-col>
                            <el-col :span="12">
                                <el-link :href="'/postBarIndex?barId=' + bar.id" type="danger" class="my_el_link" target="_blank" ><span>{{bar.name}}</span></el-link>
                                <div class="margin_top_30">
                                    <span class="bar_desc">
                                        {{bar.describe}}
                                    </span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <!--右边-->
                    <el-col :span="6" :offset="8">
                        <div class="margin_left_80 margin_top_15">
                            <!--rvcMap['join'] 其中join是键   true表示已加入（显示退出按钮）   false表示未加入（显示加入按钮）-->
                            <el-button type="info" @click="exitBar(bar.id)" size="medium" v-if="rvcMap['join']" round>退出贴吧</el-button>
                            <el-button type="success" @click="joinBar(bar.id)" size="medium" round v-else>加入贴吧</el-button>
                        </div>
                        <div class="font_size_15 bar_peo_num" >
                            <span class="color_gray_tip">人数：</span>
                            <span class="red_color2">{{bar.peopleNum}}</span>
                        </div>
                        <div class="font_size_15 bar_post_num">
                            <span class="color_gray_tip">帖子数：</span>
                            <span class="red_color2">{{bar.postNum}}</span>
                        </div>
                    </el-col>
                </el-row>

                <!--帖子信息（包括评论等）-->
                <div class="font post_part" >
                    <!--帖子基本信息（标题+按钮）-->
                    <el-row class="post_title">
                        <el-col :span="15" :offset="1" >
                            <h1>{{post.title}}</h1>
                        </el-col >
                        <el-col :span="8"  class="post_title_btn">
                            <el-button-group>
                                <el-button type="success" plain icon="el-icon-star-off" v-if="!rvcMap['clt']" @click="collect()">收  藏({{post.collectNum}})</el-button>
                                <el-tooltip class="item" effect="light" content="取消收藏这篇帖子" placement="bottom-start" v-else>
                                    <el-button type="info" plain icon="el-icon-star-on" @click="cancelClt()">取  消</el-button>
                                </el-tooltip>

                                <el-button type="danger" plain icon="el-icon-sugar" @click="subscribe()" v-if="!rvcMap['sbc']">点  赞({{post.sbcNum}})</el-button>
                                <el-tooltip class="item" effect="light" content="给这篇帖子取消点赞" placement="bottom-end" v-else>
                                    <el-button type="info" plain @click="cancelSbc()" icon="el-icon-sugar">取  消</el-button>
                                </el-tooltip>
                            </el-button-group>
                        </el-col>
                    </el-row>
                    <el-divider content-position="right">少年当自强</el-divider>

                    <!--帖子内容-->
                    <el-row class="post_info">
                        <!--左边楼主信息-->
                        <el-col :span="5" class="center left_user" v-if="post.user !== undefined" >
                            <div >
                                <el-avatar shape="square" :size="100" :src="userHeadUrlPrefix + post.user.headImg"></el-avatar>
                            </div>
                            <div>
                                <el-link @click="toMyIndex(post.user.uname)" class="font_size_19">
                                    <span>{{post.user.nickName}}</span>
                                </el-link>
                            </div>
                            <div  style="font-size: 15px;"><span>(1  楼)</span></div>
                            <div></div>
                        </el-col>
                        <!--右边帖子内容-->
                        <el-col :span="19" class="post_info_content">
                            <div v-html="post.content"></div>
                            <!--图片(如果有的话)-->
                            <el-row v-if="post.images !== 'noImg'" > <!--帖子图片  （如果有的话） 最多3张-->
                                <el-image
                                        v-for="img in post.images"
                                        :key="img"
                                        style="width: 100px; height: 100px; margin-right: 8px"
                                        :src="img"
                                        fit="scale-down"
                                        :preview-src-list="post.images"></el-image>
                            </el-row>
                            <el-row >
                                <el-col :span="4">
                                    <span class="color_gray_tip font_size_15">{{post.sdfTime}}</span>
                                </el-col>
                                <el-col :span="2" :offset="18">
                                    <el-link type="primary" :underline="false" class="font_size_15" href="#comment">评论</el-link>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                    <!--评论回复等信息-->
                    <el-row class="post_info" v-for="(reply, index) in currentPageReplies" :key="reply.id">
                        <!--左边评论人信息-->
                        <el-col :span="5" class="center left_user" v-if="reply.user !== undefined" >
                            <div >
                                <el-avatar shape="square" :size="100" :src="userHeadUrlPrefix + reply.user.headImg"></el-avatar>
                            </div>
                            <div>
<!--                                <el-link href="https://element.eleme.io" target="_blank" class="font_size_19">-->
                                <el-link @click="toMyIndex(reply.user.uname)" class="font_size_19">
                                    <span>{{reply.user.nickName}}</span>
                                </el-link>
                            </div>
                            <div  style="font-size: 15px;"><span>({{(currentReplyPage-1)*replyPageSize + index + 2}}  楼)</span></div>
                            <!--用的v-show  该div实际上是会被渲染出来的，只是不可见，所以.left_user>div:last-child可以定位到，而v-if则不行-->
                            <div v-show="reply.user.uname === post.user.uname"></div>
                        </el-col>
                        <!--右边评论内容-->
                        <el-col :span="19" class="post_info_content" style="padding-bottom: 50px">
                            <div style="min-height: 91px" class="post_info_content_top">
                                <div v-html="reply.content" ></div>
                                <!--图片(如果有的话)-->
                                <el-row v-if="reply.images !== 'noImg'"> <!--帖子图片  （如果有的话） 最多3张-->
                                    <el-image
                                            v-for="img in reply.images"
                                            :key="img"
                                            style="width: 100px; height: 100px; margin-right: 8px"
                                            :src="img"
                                            fit="scale-down"
                                            :preview-src-list="reply.images"></el-image>
                                </el-row>
                            </div>

                            <!--评论回复条-->
                            <div style=" width: 98%; margin-top: 40px">
<!--                            <div style="position: absolute; bottom: 20px; width: 98%;">-->
                                <el-collapse v-model="activeNames" >
                                    <el-collapse-item :title="'回复详情(' + reply.replyReplies.length + ')'" :name="reply.id" >
                                        <div style="padding: 0 15px">
                                            <!--一条回复-->
                                            <el-row v-for="rr in reply.replyReplies" :key="rr.id" class="round_border color_bg_gray reply_piece">
                                                <!--左边回复人头像-->
                                                <el-col :span="2">
                                                    <el-avatar shape="square" size="large" :src="userHeadUrlPrefix + rr.user.headImg"></el-avatar>
                                                </el-col>

                                                <!--右边回复内容 + 图片 + 时间、回复链接-->
                                                <el-col :span="22">
                                                    <div style="margin-bottom: 7px;">
                                                        <el-link @click="toMyIndex(rr.user.uname)" type="primary">
                                                            <span>{{rr.user.nickName}}</span>
                                                        </el-link>
                                                        <span v-if="rr.type === 0">
                                                          回复
                                                            <el-link type="primary" @click="toMyIndex(rr.toReplyReply.user.uname)">
                                                                <span>{{rr.toReplyReply.user.nickName}}</span>
                                                            </el-link>
                                                        </span>
                                                        :
                                                        <span>{{rr.content}}</span>
                                                    </div>
                                                    <div style="margin-bottom: 10px;">
                                                        <!--图片(如果有的话)-->
                                                        <el-row v-if="rr.images !== 'noImg'"> <!--帖子图片  （如果有的话） 最多3张-->
                                                            <el-image
                                                                    v-for="img in rr.images"
                                                                    :key="img"
                                                                    style="width: 65px; height: 65px; margin-right: 8px"
                                                                    :src="img"
                                                                    fit="fill"
                                                                    :preview-src-list="rr.images"></el-image>
                                                        </el-row>
                                                    </div>
                                                    <div style="margin-bottom: 4px;">
                                                        <el-row>
                                                            <el-col :span="4">
                                                                <span class="color_gray_tip">{{rr.sdfTime}}</span>
                                                            </el-col>
                                                            <el-col :span="2" :offset="18">
                                                                <span>
                                                                    <el-link type="primary" :underline="false" @click="replyToReply(index, reply.id, rr.id, rr.user.nickName)">回复</el-link>
                                                                </span>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                </el-col>
                                            </el-row>

                                            <!--和上面的回复列表拉开间隔-->
                                            <div v-if="currentUser.role !== ''" style="height: 6px"></div>
                                            <!--底下的回复框-->
                                            <el-row v-if="currentUser.role !== ''" type="flex" justify="center" class="reply_frame">
<!--                                                <el-form :model="rrForm" id="rrForm" :rules="rrRules" ref="rrRuleForm">-->
<!--                                                <el-form :model="rrForm[reply.id]" :rules="rrRules" :ref="'rrRuleForm' + reply.id">-->
                                                <el-col :span="20">
                                                    <el-form  :rules="rrRules" :model="rrForm[index]" :ref="'rrRuleForm' + reply.id" label-position="top">
                                                        <el-row type="flex" justify="center">
                                                            <el-col :span="2" class="center">
                                                                <el-avatar size="large" :src="currentUser.headImg"></el-avatar>
                                                            </el-col>
                                                            <el-col :span="1"><span class="font_weight_700">:</span></el-col>
                                                            <el-col :span="16">
                                                                <el-form-item prop="content">
                                                                    <el-input type="textarea" v-model="rrForm[index].content" :placeholder="rrForm[index].placeHd"></el-input>
                                                                </el-form-item>
                                                                <el-form-item label="选择图片(可选)：">
                                                                    <addPic :ref="'myAddPic' + reply.id"></addPic>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="3" class="pb_rr_btn">
                                                                <el-form-item>
                                                                    <el-button size="mini" type="primary" plain @click="submitRrForm('rrRuleForm'+reply.id, 'myAddPic'+reply.id, index)">发表</el-button>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>
                                                    </el-form>
                                                </el-col>
                                            </el-row>
                                            <el-row v-else class="center margin_top_20">
                                                <div><a href="/login" class="mylink">登录</a>后才可对该评论发表回复哦~！</div>
                                            </el-row>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>

                            <!--评论时间、点赞、回复-->
                            <el-row >
                                <el-row>
                                    <el-col :span="4">
                                        <span class="color_gray_tip font_size_15">{{reply.sdfTime}}</span>
                                    </el-col>
                                    <el-col :span="3" :offset="15">

                                        <el-tooltip class="item" effect="light" content="给这条评论取消点赞" placement="bottom-start" v-if="prRvcMap[reply.id]">
                                            <el-link type="info" :underline="false" class="font_size_15" icon="el-icon-sugar" v-on:click="cancelSbcPr(reply.id, index)" >
                                                取消({{reply.totalSubscribe}})
                                            </el-link>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="light" content="给这条评论点赞" placement="bottom-start" v-else>
                                            <el-link type="danger" :underline="false" class="font_size_15" icon="el-icon-sugar" @click="subscribePr(reply.id, index)">
                                                点赞({{reply.totalSubscribe}})
                                            </el-link>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-link type="primary" :underline="false" class="font_size_15" @click="replyToComment(index, reply.id)">回复</el-link>
                                    </el-col>
                                </el-row>
                            </el-row>
                        </el-col>
                    </el-row>

                    <!--评论回复分页-->
                    <el-row class="margin_top_15 center">
                        <el-col>
                            <el-pagination
                                    @current-change="updateReplyListWithPage"
                                    :current-page.sync="currentReplyPage"
                                    :page-size="replyPageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="totalReplyRs">
                            </el-pagination>
                        </el-col>
                    </el-row>

                    <!--帖子评论框-->
                    <div id="comment" class="padding_top_30 comment_box">
                        <el-row  v-show="currentUser.role !== ''" type="flex" justify="center">
                            <el-col :span="20">
                                <el-row>
                                    <el-form label-position="left" label-width="136px" :model="commentForm" id="commentForm" class="publish_post_form font"
                                             :rules="commentRules" ref="commentRuleForm">
                                        <el-col :span="20">
                                            <el-form-item label="发表评论：" prop="comment">
                                                <!--调用wangEditor 编辑器-->
                                                <div id="editor" ></div>
                                            </el-form-item>
                                            <el-form-item label="选择图片(可选)：">
                                                <addPic ref="myAddPic"></addPic>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="4" class="center">
                                            <el-button type="success" round size="medium" class="pb_comment_btn" v-on:click="submitCommentForm('commentRuleForm', 'myAddPic')">立即发表</el-button>
                                        </el-col>
                                    </el-form>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row v-show="currentUser.role === ''" class="center margin_top_55">
                            <div><a href="/login" class="mylink">登录</a>后才可对该帖子发表评论哦~！</div>
                        </el-row>
                    </div>

                </div>

            </el-col>
        </el-row>
        <div class="center red_color" v-else>
            <el-result icon="error" title="信息获取失败" :subTitle="getPInfoRs.msg">
                <template slot="extra">
                    <el-button type="primary" size="medium" v-on:click="backToIndex">返回</el-button>
                </template>
            </el-result>
        </div>

        <!--版权信息-->
        <el-row type="flex" justify="center">
            <el-col :span="15">
                <copy-right></copy-right>
            </el-col>
        </el-row>
        <!--返回顶部   这里不传target的值（根据他源码是可以这么做，可以直接用的，虽然我看不大懂）  target要设置的化是外部容器，而且要有一定的css样式，可以看我edge收藏夹-->
        <el-backtop></el-backtop>
    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar";
    import searchBar from "@/components/component/searchBar";
    import addPicture from "@/components/component/addPicture";
    import btmCopyRight from "@/components/component/btmCopyRight";
    import E from 'wangeditor';

    export default {
        name: "postInfo",
        data(){
            /*检验 编辑器内容(帖子评论输入框)是否为为为空 （目前：就单单选择一些样式而不输入实际内容 this.editor.txt.html() 也不为空，而是一些标签什么的）*/
            /*但this.editor.txt.text()  可以获取你实际输入的内容  有内容就是有内容 没有就是没有*/
            var checkContentNotNull = (rule, value, callback) => {
                if (this.editor.txt.text() === ''){
                    callback(new Error("请输入评论内容！"));
                }else {  /*不为空则正常返回*/
                    callback();
                }
            };

            return{
                rrRules:{  // 帖子评论回复  表单的表单验证
                    content: [
                        { required: true, message: '请输入回复内容！', trigger: 'change' }
                    ],
                },
                commentRules:{
                    comment: [
                        { validator: checkContentNotNull, trigger: 'blur' },
                        { required: true, trigger: 'blur' },  /*设置必须  排在validator 后面  实际只是表现一个*的效果*/
                        // { required: true, message: '请输入评论内容！', trigger: 'change' }
                    ]
                },
                userHeadUrlPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg,
                barHeadUrlPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.barHeadImg,
                postImgPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.postImg,   /*帖子图片 地址 前缀*/
                postReplyImgPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.prImg,   /*帖子评论图片 地址 前缀*/
                replyReplyImgPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.prReplyImg,   /*帖子评论图片 地址 前缀*/
                postId: 0, // 帖子编号  默认为0
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                getPInfoRs: {
                    postSuccess: true,  // 成功从后台获取到帖子的有关信息（包括加入关系等）
                    msg: '', //从后台获取  帖子信息失败时 携带的错误提示信息
                },
                post: {},

                /*评论分页相关*/
                currentReplyPage: 1, //当前 评论页，默认为 1, 会随着点击更改。
                replyPageSize: 10, /*评论分页 每页的大小*/
                totalReplyRs: 0, /*评论总数*/
                currentPageReplies: [], /*当前评论页 评论数组*/

                bar:{},
                rvcMap:[], //  后台传来的用户和帖子的点赞、收藏关系；用户和贴吧的加入关系
                prRvcMap: [], /*当前登录用户和帖子评论之间的点赞关系   接收的是后台传来的一个map（键为评论id，值为true已点赞或者false未点赞） 可以直接rvcMap[id]进行调用 */
                activeNames: [], // 当前评论回复条展开的面板 对应面板的 name属性  讲道理，默认应该展开所有
                rrForm:[], // 帖子评论的回复 表单
                commentForm:{
                    comment:'', // 评论内容
                },
                editor: null,
            }
        },
         created(){  // 页面加载前执行  需要获取的内容：当前登录用户信息 、 帖子信息（帖子本身内容、所属贴吧信息、评论及回复信息）
            // 接收参数（帖子id）
             if (this.$route.query.pid != null && this.$route.query.pid !== ''){
                 this.postId = this.$route.query.pid;
             }

            let arr = [];
            arr.push({name:'郭君辉', what: '我'});
            arr.push({name:'郭君辉', what: '爱'});
            arr.push({name:'郭君辉', what: '浩浩！'});
            // arr.push("爱，");
            // arr.push("浩浩！，");

             console.log("arr:");
             console.log(arr);

             // 测试批量插入 -- 测试消息
             // this.submitCommentTest();
        },

        mounted(){
            //初始化  顶部的评论 编辑器
            const editor = new E( document.getElementById('editor') );

            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.commentForm.comment = newHtml
            };
            // 设置编辑区域高度为 500px
            editor.config.height = 250;
            editor.config.zIndex = 0;  // 将显示优先级设置为0  免得影响一些模态框之类的
            // 配置菜单栏，设置不需要的菜单（把视频移除）
            editor.config.excludeMenus = [
                'video'
            ];
            editor.create();

            this.editor = editor;

            //初始化 底部帖子评论 的图片上传照片墙组件
            this.$refs.myAddPic.init(3, "medium"); //最多上传3张图片


            //后台请求初始化页面数据信息
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postGetInfo + "?postId=" + this.postId).then(req=>{
                if (req.data !== ""){
                    //初始化当前登录用户信息
                    // if (req.data.user !== null){  // 当前未登录，session中的 user为null  返回null
                    //     this.currentUser.headImg = this.GLOBAL.serverBaseUrl +  this.GLOBAL.userHeadImg + req.data.user.headImg;
                    //     this.currentUser.nickName = req.data.user.nickName;
                    //     this.currentUser.motto = req.data.user.motto;
                    //     this.currentUser.role = req.data.user.role;
                    // }

                    if (req.data.rs.result_code === 200){ //后台成功获取信息  （包含用户未登录的情况）
                        //初始化帖子、贴吧等基本信息
                        this.post = req.data.post;
                        console.log("postttt:" + this.post.title);
                        this.bar = req.data.post.postBar;
                        this.bar.barImg = this.barHeadUrlPrefix + this.bar.barImg;
                        console.log(this.bar.barImg);
                        //初始化 用户帖子、贴吧关系
                        this.rvcMap = req.data.rvc;
                        //初始化 用户 评论关系
                        this.prRvcMap = req.data.prRvcMap;
                        // 初始化 评论总数
                        this.totalReplyRs = req.data.post.replies.length;

                        /*处理帖子时间和图片信息*/
                        let dateTime = new Date(this.post.pbTime);
                        this.post.sdfTime = (dateTime.getMonth() + 1) + '-'
                            + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
                        let image = this.post.images;
                        if(image !== "noImg"){ // 如果有 图片的话
                            image = image.split(" ");   //以空格分隔  拆分字符串
                            for(let j = 0; j < image.length; j++){
                                image[j] = this.postImgPrefix + image[j];
                            }
                            this.post.images = image;  // 将划分后的  图片名称 构成的数组（object） 重新赋值
                        }
                        /*处理帖子评论信息的 时间 和 图片 */
                        for (let i = 0; i < this.post.replies.length; i++){
                            let replyImage = this.post.replies[i].images;
                            if (replyImage !== "noImg" ){
                                replyImage = replyImage.split(" "); //以空格分隔
                                for(let j = 0; j < replyImage.length; j++){
                                    replyImage[j] = this.postReplyImgPrefix + replyImage[j];
                                }
                            }
                            this.post.replies[i].images = replyImage;

                            /*处理时间*/
                            let replyTime = new Date(this.post.replies[i].pbTime);
                            this.post.replies[i].sdfTime = (replyTime.getMonth() + 1) + '-'
                                + replyTime.getDate() + ' ' + replyTime.getHours() + ':' + replyTime.getMinutes();

                            /*把所有帖子评论的id 添加至activeNames  默认所有评论(回复数大于0)的回复条都展开激活*/
                            /*这里可以在回复条里做个分页，每页5条，先搁置一下*/
                            if(this.post.replies[i].replyReplies.length > 0){
                                this.activeNames.push(this.post.replies[i].id);
                                // this.activeNames.push(this.post.replies[i].id);
                            }

                            /*处理帖子评论回复的图片*/
                            for (let j = 0; j < this.post.replies[i].replyReplies.length; j++){
                                let rrImage = this.post.replies[i].replyReplies[j].images;
                                if (rrImage !== "noImg" ){
                                    rrImage = rrImage.split(" "); //以空格分隔
                                    for(let m = 0; m < rrImage.length; m++){
                                        rrImage[m] = this.replyReplyImgPrefix + rrImage[m];
                                    }
                                }
                                this.post.replies[i].replyReplies[j].images = rrImage;
                            }
                            /*处理帖子评论回复的时间*/
                            for (let j = 0; j < this.post.replies[i].replyReplies.length; j++){
                                let rrTime = new Date(this.post.replies[i].replyReplies[j].pbTime);
                                this.post.replies[i].replyReplies[j].sdfTime = (rrTime.getMonth() + 1) + '-'
                                    + rrTime.getDate() + ' ' + rrTime.getHours() + ':' + rrTime.getMinutes();
                            }
                            // /*初始化帖子评论回复  的表单*/
                            // this.rrForm.push({'replyId': this.post.replies[i].id, 'rrId': 0, 'content': '', 'placeHd': '呜呼！'});  /*所属评论id*/
                            // this.rrForm.push({'rrId': 0});  /*针对评论回复id   默认是0，即不存在（说明该回复是直接针对 帖子评论本身的）*/
                            // this.rrForm.push({'content': ''});  /*评论回复的 内容*/
                            // this.rrForm.push({'placeHd': '呜呼！'});  /*评论回复 textarea  预先显示的内容*/


                            // /*处理评论回复 照片墙多图上传组件的初始化  this.$nextTick 数据更新后的回调函数  */
                            // if (this.currentUser.role !== ""){
                            //     this.$nextTick(() => {
                            //         let fRef =  "myAddPic" + this.post.replies[i].id;
                            //         this.$refs[fRef][0].init(3, "small");
                            //     })
                            // }
                        }

                        // 初始化当前页的评论数组  默认获取第一页
                        this.updateReplyListWithPage(1);
                    }else if (req.data.rs.result_code === 309){ // 未根据id 查到帖子信息（帖子不存在或已被删除）
                        // 跳转到错误页面
                        let routeUrl = this.$router.resolve({
                            path: "/errorPage",
                            /*这样传递的参数  好像会在地址栏显示出来*/

                            query: {   /*参数都是string 类型*/
                                errSection: '帖子详情',
                                errDesc: req.data.rs.msg + '',
                                redctType:  1},
                        });

                        //在当前页面打开打开
                        window.open(routeUrl.href, "_self");
                    } else{ // 后台查询发生异常
                        this.getPInfoRs.postSuccess = false;
                        this.getPInfoRs.msg = req.data.rs.msg + "(" + req.data.rs.result_code + ")";
                    }
                }else {
                    this.getPInfoRs.postSuccess = false;
                    this.getPInfoRs.msg = '糟糕，服务器出事了。。';
                }
            });
        },

        methods: {
            // 帖子评论 分页切换页码时触发  ， 参数为要跳转的页面
            updateReplyListWithPage(index){
                // alert("要跳转的页码：" + index);

                // 更新当前要渲染的 页面 评论列表
                this.currentPageReplies = [];
                // 根据 下标截取数组  包左不包右
                this.currentPageReplies = this.post.replies.slice((index-1) * this.replyPageSize, index * this.replyPageSize);

                /* 对当前渲染的评论列表  初始化回复条（包括回复表单数组以及 多图上传照片墙） */
                if (this.currentUser.role !== ""){
                    this.rrForm = [];
                    for (let i = 0; i < this.currentPageReplies.length; i++) {
                        /*初始化帖子评论回复  的表单*/
                        this.rrForm.push({'replyId': this.currentPageReplies[i].id, 'rrId': 0, 'content': '', 'placeHd': '呜呼！'});  /*所属评论id*/

                        /*初始化（回复条）照片墙多图上传组件*/
                        this.$nextTick(() => {
                            let fRef =  "myAddPic" + this.currentPageReplies[i].id;
                            this.$refs[fRef][0].init(3, "small");
                        })
                    }
                }
            },


            // 跳转至用户个人主页
            toMyIndex(uname){
                console.log("点击进入个人主页。");
                let routeUrl = this.$router.resolve({
                    path: "/myIndex",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {uname: uname},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在新页面打开
                window.open(routeUrl.href, "_blank");
            },

            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;
            },

            /*查询出错时 可点击返回按钮返回首页*/
            backToIndex(){
                this.$router.push({name:"index"}); //跳转到 index.vue
            },

            /*
            点击每条评论下的  回复链接触发
            功能描述: 如果回复面板没展开的话， 将面板展开
                     “将对应 的textarea的 placeholder清空（恢复默认） 将对应rrForm的rrId 置0（默认，表示该回复针对帖子评论） ”
            参数: 对应的 数组索引index   activeName：对应回复面板的name，将其放在activeNames里面可将其打开
            返回值：无
            * */
            replyToComment(index, activeName){
                //检测是否已登录
                if (this.currentUser.role === ""){
                    this.$notify.warning({
                        title: '消息',
                        message: "登录后才可进行回复！",
                        duration: 3000,   /*设置为3秒后  自动关闭*/
                    });
                    return;
                }

                /*如果该面板未展开（数组中不存在）则展开面板*/
                if (this.activeNames.indexOf(activeName) <= -1){
                    this.activeNames.push(activeName);
                }

                this.rrForm[index].placeHd = '';
                this.rrForm[index].content = '';
                this.rrForm[index].rrId = 0;
            },

            /*
            点击每条评论回复下的  回复链接触发
            功能描述: 如果回复面板没展开的话， 将面板展开
                     “将对应 的textarea的 placeholder置为 回复 “xxx”： 将对应rrForm的rrId 置为要回复的评论回复的id ”
            参数: 对应的 数组索引index   activeName：对应回复面板的name，将其放在activeNames里面可将其打开
                    toReplyId  要回复的评论回复id   toUserNick要回复的评论回复人（昵称nickName）
            返回值：无
            * */
            replyToReply(index, activeName, toReplyId, toUserNick){
                console.log("进入replyToReply");
                console.log("index:" + index);
                console.log("toReplyId:" + toReplyId);

                //检测是否已登录
                if (this.currentUser.role === ""){
                    this.$notify.warning({
                        title: '消息',
                        message: "登录后才可进行回复！",
                        duration: 3000,   /*设置为3秒后  自动关闭*/
                    });
                    return;
                }

                /*如果该面板未展开（数组中不存在）则展开面板*/
                if (this.activeNames.indexOf(activeName) <= -1){
                    this.activeNames.push(activeName);
                }

                this.rrForm[index].rrId = toReplyId;
                this.rrForm[index].content = '';
                this.rrForm[index].placeHd = "回复 " + "\"" + toUserNick + "\":";
            },

            /*在回复成功后 清空对应回复表单的内容（重置）   index为回复框的表单数组索引*/
            resetRrForm(index){
                this.rrForm[index].content = ' ';
                this.rrForm[index].placeHd = '呜呼！';
                this.rrForm[index].rrId = 0;
            },

            /*发表 评论*/
            /*formRef 对应回复表单的ref  addPicRef 评论块中照片墙组件的ref */
            submitCommentForm(formRef, addPicRef){
                // alert("formRef:" + formRef);
                this.$refs[formRef].validate((valid) => {
                    if (valid) {
                        let formData = new FormData();
                        formData = this.$refs[addPicRef].getFormData();  /*获取要上传的文件列表  注意  此时获取到的是引用，会影响到子组件中变量的值*/
                        formData.append("content", this.commentForm.comment);
                        formData.append("postId", this.postId);

                        this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.prPublish, formData).then(req=>{
                            if (req.data !== ''){
                                switch (req.data.result_code ) {
                                    case 200:  //正常成功发表评论 提示成功   并  刷新页面  重新获取数据
                                        this.$message.success( req.data.msg);
                                        // location.reload();  //刷新页面  这样直刷新会导致整个页面瞬间重新加载   提示框会直接消失
                                        //所以还是采用先跳转到 空白页 再跳回来比较好
                                        // 个人猜测是 ：
                                        //跳转到空白页后当前页面不会瞬间回收  而是有个循序渐进的过程  所以提示框可以正常持续
                                        // 然后再跳转回来  ，  跳转回来之后 又是一个全新的页面， 和跳转之前的页面是两不影响的。
                                        // 还要看从空白页跳回来的方式，如果还是 this.$router.push，那可以正常显示消息，如果通过 windows.open 跳转，那提示还是会很快消失。
                                        this.$router.push({name:'classifytmp', params:{fromPostInfo: 'fromPostInfo', postId: this.postId+''}});  // 这里需要把 帖子id 同时传递
                                        break;
                                    case 300:  //数据库插入失败
                                    case 303:  //数据库插入发生异常
                                    case 408:  // 文件写入发生异常
                                        this.$alert(req.data.msg, '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                        });
                                        break;
                                    case 605:  //未登录
                                        this.$confirm(req.data.msg, '错误', {
                                            distinguishCancelAndClose: true,
                                            type: 'error',
                                            confirmButtonText: '确定',
                                            cancelButtonText: '立即登录'
                                        }).then(() => {  /*点击确定*/
                                        }).catch(action => {
                                            if (action === 'cancel'){  /*点击立即登录*/
                                                this.$router.push({name:'login'})
                                            }else {  /*点击关闭按钮*/
                                            }
                                        });
                                        break;
                                    case 800:  // 消息发送失败（插入失败或异常）
                                        this.$message({
                                            message: req.data.msg,
                                            type: 'warning',
                                            duration: 0,
                                            showClose: true
                                        });
                                        console.log("800");
                                        this.$router.push({name:'classifytmp', params:{fromPostInfo: 'fromPostInfo', postId: this.postId+''}});  // 这里需要把 帖子id 同时传递
                                        break;
                                    default:
                                        this.$alert('未知错误！', '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                        });
                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            // 发表评论测试 消息功能
            submitCommentTest(){
                // 插40条评论
                for (let i = 0; i < 40; i++) {
                    let formData = new FormData();
                    formData.append("content", "缓缓飘落的枫叶像思念 - " + (i+1));
                    formData.append("postId", this.postId);

                    this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.prPublish, formData).then(req=>{
                        if (req.data !== ''){
                            switch (req.data.result_code ) {
                                case 200:  //正常成功发表评论 提示成功   并  刷新页面  重新获取数据
                                    this.$message.success( req.data.msg);
                                    // location.reload();  //刷新页面  这样直刷新会导致整个页面瞬间重新加载   提示框会直接消失
                                    //所以还是采用先跳转到 空白页 再跳回来比较好
                                    // 个人猜测是 ：
                                    //跳转到空白页后当前页面不会瞬间回收  而是有个循序渐进的过程  所以提示框可以正常持续
                                    // 然后再跳转回来  ，  跳转回来之后 又是一个全新的页面， 和跳转之前的页面是两不影响的。
                                    // 还要看从空白页跳回来的方式，如果还是 this.$router.push，那可以正常显示消息，如果通过 windows.open 跳转，那提示还是会很快消失。
                                    break;
                                case 300:  //数据库插入失败
                                case 303:  //数据库插入发生异常
                                case 408:  // 文件写入发生异常
                                    this.$alert(req.data.msg, '错误', {
                                        confirmButtonText: '确定',
                                        type: 'error',
                                    });
                                    break;
                                case 605:  //未登录
                                    this.$confirm(req.data.msg, '错误', {
                                        distinguishCancelAndClose: true,
                                        type: 'error',
                                        confirmButtonText: '确定',
                                        cancelButtonText: '立即登录'
                                    }).then(() => {  /*点击确定*/
                                    }).catch(action => {
                                        if (action === 'cancel'){  /*点击立即登录*/
                                            this.$router.push({name:'login'})
                                        }else {  /*点击关闭按钮*/
                                        }
                                    });
                                    break;
                                case 800:  // 消息发送失败（插入失败或异常）
                                    this.$message({
                                        message: req.data.msg,
                                        type: 'warning',
                                        duration: 0,
                                        showClose: true
                                    });
                                    console.log("800");
                                    break;
                                default:
                                    this.$alert('未知错误！', '错误', {
                                        confirmButtonText: '确定',
                                        type: 'error',
                                    });
                            }
                        }else {
                            this.$message.error('糟糕，服务器出事了。。');
                        }
                    });
                }

            },

            /*发表 评论回复*/
            /*formRef 对应回复表单的ref  index 对应回复信息数组索引  addPicRef 评论回复块中照片墙组件的ref */
            submitRrForm(formRef, addPicRef, index){
                // alert("formRef:" + formRef);
                this.$refs[formRef][0].validate((valid) => {
                    if (valid) {
                        let formData = new FormData();
                        formData = this.$refs[addPicRef][0].getFormData();  /*获取要上传的文件列表  注意  此时获取到的是引用，会影响到子组件中变量的值*/
                        formData.append("replyId", this.rrForm[index].replyId);
                        formData.append("rrId", this.rrForm[index].rrId);
                        formData.append("content", this.rrForm[index].content);
                        formData.append("postId", this.postId);
                        this.$refs[addPicRef][0].clearFiles();  //清空已上传的文件  同时对子组件的 formData重新定义（刷掉父组件append新值的影响）

                        this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.rrPublish, formData).then(req=>{
                            if (req.data !== ''){
                                switch (req.data.rs.result_code ) {
                                    case 200:  //正常成功发表 并将该回复信息直接加到对应数组里（这样可以不刷新页面显示，效果较好）
                                        this.$message.success( req.data.rs.msg);
                                        var newRr = req.data.rr;

                                        {
                                            /*处理新回复的图片*/
                                            let rrImage = newRr.images;
                                            if (rrImage !== "noImg" ){
                                                rrImage = rrImage.split(" "); //以空格分隔
                                                for(let m = 0; m < rrImage.length; m++){
                                                    rrImage[m] = this.replyReplyImgPrefix + rrImage[m];
                                                }
                                            }
                                            newRr.images = rrImage;

                                            /*处理新回复的时间*/
                                            let rrTime = new Date(newRr.pbTime);
                                            newRr.sdfTime = (rrTime.getMonth() + 1) + '-'
                                                + rrTime.getDate() + ' ' + rrTime.getHours() + ':' + rrTime.getMinutes();
                                        }

                                        // this.post.replies[index].replyReplies.push(newRr);
                                        this.currentPageReplies[index].replyReplies.push(newRr);
                                        // 清空回复框对应数组
                                        this.resetRrForm(index);
                                        break;
                                    case 300:  //数据库插入失败
                                    case 303:  //数据库插入发生异常
                                    case 408:  // 文件写入发生异常
                                        this.$alert(req.data.rs.msg, '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                        });
                                        break;
                                    case 605:  //未登录
                                        this.$confirm(req.data.rs.msg, '错误', {
                                            distinguishCancelAndClose: true,
                                            type: 'error',
                                            confirmButtonText: '确定',
                                            cancelButtonText: '立即登录'
                                        }).then(() => {  /*点击确定*/
                                        }).catch(action => {
                                            if (action === 'cancel'){  /*点击立即登录*/
                                                this.$router.push({name:'login'})
                                            }else {  /*点击关闭按钮*/
                                            }
                                        });
                                        break;
                                    case 800:  // 消息发送失败（插入失败或异常）
                                        this.$message({
                                            message: req.data.rs.msg,
                                            type: 'warning',
                                            duration: 0,
                                            showClose: true
                                        });
                                        console.log("800 -- 回复消息");
                                        break;
                                    default:
                                        this.$alert('未知错误！', '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                        });
                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            /*为了提高代码重用性和可维护性  这里直接把处理收藏、取消收藏、点赞、取消点赞的方法抽出来*/
            handleRvc(url, type){
                this.$http.get(url).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功收藏*/
                            this.$notify({
                                title: '成功',
                                message: req.data.msg,
                                type: 'success',
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });

                            /*根据不同的操作进行一些不同的 成功结果操作*/
                            switch (type) {
                                case "clt":
                                    // 加入成功后修改 用户贴吧关联rvcMap  对应的值为true
                                    this.rvcMap['clt'] = true;
                                    //对应帖子收藏数 ++
                                    this.post.collectNum++;
                                    break;
                                case "cancelClt":
                                    this.rvcMap['clt'] = false;
                                    this.post.collectNum--;
                                    break;
                                case "sbc":
                                    this.rvcMap['sbc'] = true;
                                    this.post.sbcNum++;
                                    break;
                                case "cancelSbc":
                                    this.rvcMap['sbc'] = false;
                                    this.post.sbcNum--;
                                    break;
                                default:
                                    alert("未知操作！");
                            }
                        } else if (req.data.result_code === 605 || req.data.result_code === 710) {  /*用户未登录 ；特殊帖子不可收藏*/
                            this.$notify.info({
                                title: '消息',
                                message: req.data.msg,
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                        } else if (req.data.result_code === 300 || req.data.result_code === 303) {  /*数据库插入失败  或  发生异常*/
                            this.$notify.error({
                                title: '错误',
                                message: req.data.msg,
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        } else if (req.data.result_code === 800){ //  消息发送失败
                            if (type === 'sbc'){ // 点赞（帖子）消息
                                // 依旧修改 帖子点赞信息
                                this.rvcMap['sbc'] = true;
                                this.post.sbcNum++;

                                console.log("800 -- 点赞帖子消息");
                            }else if (type === 'clt'){  // 收藏消息
                                // 依旧修改 帖子收藏信息
                                this.rvcMap['clt'] = true;
                                this.post.collectNum++;
                                console.log("800 -- 点赞帖子消息");
                            }

                            // 提示点赞消息发送失败
                            this.$message({
                                message: req.data.rs.msg,
                                type: 'warning',
                                duration: 0,
                                showClose: true
                            });
                        } else{
                            this.$notify.error({
                                title: '错误',
                                message: '未知错误！！！',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },

            /*收藏帖子和取消收藏*/
            collect(){
                this.handleRvc(this.GLOBAL.serverBaseUrl + this.GLOBAL.postClt + "?postId=" + this.postId, "clt");
            },
            cancelClt(){
                this.handleRvc(this.GLOBAL.serverBaseUrl + this.GLOBAL.postCancelClt + "?postId=" + this.postId, "cancelClt");
            },
            /*点赞帖子和取消点赞*/
            subscribe(){
                this.handleRvc(this.GLOBAL.serverBaseUrl + this.GLOBAL.postSbc + "?postId=" + this.postId, "sbc");
            },
            cancelSbc(){
                this.handleRvc(this.GLOBAL.serverBaseUrl + this.GLOBAL.postCancelSbc + "?postId=" + this.postId, "cancelSbc");
            },

            /*点赞帖子评论和取消点赞评论*/
            /*prId 为要点赞的 帖子评论id  index 为该评论对应帖子的评论集合（在这里是数组）中的下标索引 */
            subscribePr(prId, index){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.prSbc + "?prId=" + prId).then(req=>{
                    if (req.data !== ''){
                        switch (req.data.result_code ) {
                            case 200:  //正常成功发表 并将该评论的点赞 置为取消   同时 点赞数++
                                this.prRvcMap[prId] = true;
                                // this.post.replies[index].totalSubscribe++;
                                this.currentPageReplies[index].totalSubscribe++;
                                break;
                            case 300:  //数据库插入失败
                            case 303:  //数据库插入发生异常
                            case 408:  // 文件写入发生异常
                                this.$alert(req.data.msg, '错误', {
                                    confirmButtonText: '确定',
                                    type: 'error',
                                });
                                break;
                            case 605:  //未登录
                                this.$confirm(req.data.msg, '错误', {
                                    distinguishCancelAndClose: true,
                                    type: 'error',
                                    confirmButtonText: '确定',
                                    cancelButtonText: '立即登录'
                                }).then(() => {  /*点击确定*/
                                }).catch(action => {
                                    if (action === 'cancel'){  /*点击立即登录*/
                                        this.$router.push({name:'login'})
                                    }else {  /*点击关闭按钮*/
                                    }
                                });
                                break;
                            case 800:  // 消息发送失败（插入失败或异常）
                                // 设置点赞成功的状态
                                this.prRvcMap[prId] = true;
                                this.currentPageReplies[index].totalSubscribe++;

                                // 提示点赞消息发送失败
                                this.$message({
                                    message: req.data.msg,
                                    type: 'warning',
                                    duration: 0,
                                    showClose: true
                                });
                                console.log("800 -- 点赞评论消息");
                                break;
                            default:
                                this.$alert('未知错误！', '错误', {
                                    confirmButtonText: '确定',
                                    type: 'error',
                                });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },
            cancelSbcPr(prId, index){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.prCancelSbc + "?prId=" + prId).then(req=>{
                    if (req.data !== ''){
                        switch (req.data.result_code ) {
                            case 200:  //正常成功取消点赞 并将该评论的取消 置为点赞   同时 点赞数--
                                this.prRvcMap[prId] = false;
                                // this.post.replies[index].totalSubscribe--;
                                this.currentPageReplies[index].totalSubscribe--;
                                break;
                            case 300:  //数据库插入失败
                            case 303:  //数据库插入发生异常
                            case 408:  // 文件写入发生异常
                                this.$alert(req.data.msg, '错误', {
                                    confirmButtonText: '确定',
                                    type: 'error',
                                });
                                break;
                            case 605:  //未登录
                                this.$confirm(req.data.msg, '错误', {
                                    distinguishCancelAndClose: true,
                                    type: 'error',
                                    confirmButtonText: '确定',
                                    cancelButtonText: '立即登录'
                                }).then(() => {  /*点击确定*/
                                }).catch(action => {
                                    if (action === 'cancel'){  /*点击立即登录*/
                                        this.$router.push({name:'login'})
                                    }else {  /*点击关闭按钮*/
                                    }
                                });
                                break;
                            default:
                                this.$alert('未知错误！', '错误', {
                                    confirmButtonText: '确定',
                                    type: 'error',
                                });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

            /*加入贴吧和退出贴吧的方法连同 按钮其实可以封装成一个组件来调用   文字、大小用参数传递即可*/
            /*加入贴吧*/
            joinBar(barId){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barJoin + "?id=" + barId).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功加入*/
                            this.$notify({
                                title: '成功',
                                message: req.data.msg,
                                type: 'success',
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                            // 加入成功后修改 用户贴吧关联rvcMap  对应的值为true
                            this.rvcMap['join'] = true;
                            //对应bar人数 ++
                            this.bar.peopleNum++;
                        } else if (req.data.result_code === 605) {  /*用户未登录*/
                            this.$notify.info({
                                title: '消息',
                                message: req.data.msg,
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                        } else if (req.data.result_code === 300 || req.data.result_code === 303) {  /*数据库插入失败  或  发生异常*/
                            this.$notify.error({
                                title: '错误',
                                message: req.data.msg,
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '未知错误！！！',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },

            /*退出贴吧*/
            exitBar(barId){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barExit + "?id=" + barId).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功加入*/
                            this.$notify({
                                title: '成功',
                                message: req.data.msg,
                                type: 'success',
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                            // 退出成功后修改 用户贴吧关联rvcMap  对应的值为false(未加入)
                            this.rvcMap['join'] = false;
                            //对应bar人数 --
                            this.bar.peopleNum--;
                        } else if (req.data.result_code === 605) {  /*用户未登录  这个时候未登录显示退出按钮是不合理的 此时给出提示信息并刷新页面获取最新值*/
                            this.$message({
                                showClose: true,
                                message: req.data.msg,
                                type: 'warning',
                                duration: 0 /*设置为不自动关闭*/
                            });
                            this.$router.push({name:'classifytmp', params:{fromIndex: 'fromIndex'}});
                        } else if (req.data.result_code === 301 || req.data.result_code === 303) {  /*数据库插入失败  或  发生异常*/
                            this.$notify.error({
                                title: '错误',
                                message: req.data.msg,
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '未知错误！！！',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },
        },
        components: {
            'topNav': navigateBar,
            'searchBar': searchBar,
            'addPic': addPicture, //  底部的添加图片 组件
            'copyRight': btmCopyRight,  // 底部的版权组件
        }
    }
</script>

<style scoped>

    /*帖子标题*/
    h1{
        font-size: 24px;
        height: 42px;
        line-height: 42px;

    }

    /*一条评论回复  行row*/
    .reply_piece{
        margin-bottom: 6px;
        padding: 7px 0 0 8px;
    }

    /*评论回复  发表框 右边的发表按钮*/
    .pb_rr_btn{
        padding: 19px 0 0 15px;
    }

    /*底部的 帖子评论 “立即发表”按钮*/
    .pb_comment_btn{
        margin-top: 296px;
    }

    /*包含评论框的 div  根据登录情况显示 评论框或提示登录*/
    .comment_box{
        padding-bottom: 120px;
    }

    /*帖子内容行右边的内容列*/
    .post_info_content{
        border-left: 1px solid #DCDFE6;
        padding: 15px 15px 80px;
        height: 100%;  /*（如果relative父元素设置了高度） 继承父元素高度*/
        min-height:246px; /* 设置最小高度为左边楼主信息块高度*/
        position: relative;
        right: 0;  /*不要也可 相对定位这是*/
    }
    .post_info_content_top>div:first-child{  /*最顶上的帖子内容*/
        /*border: 1px solid black;*/
        margin-bottom: 15px;
    }
    /*.post_info_content>div:nth-last-child(2){ !*底下的时间和评论链接*!*/
    .post_info_content>div:last-child{ /*底下的时间和评论链接*/
        /*border: 1px solid black;*/
        position: absolute;
        width: 98%; /*继承第一个relative 父元素宽度  不指定的话因为绝对定位 宽度会包裹内容自适应*/
        bottom: 0;
        margin-bottom: 15px;
    }

    /*帖子内容(包括左边楼主和右边帖子内容)行*/
    .post_info{
        border-bottom: 2px solid #DCDFE6;
        border-top: 2px solid #DCDFE6;
        /*border: 1px solid black;*/
        position: relative; /*el-row默认*/
        min-height: 238px; /* 设置最小高度为左边楼主信息块高度*/
    }

    /*帖子标题行 右边的两个按钮*/
    .post_title_btn{
        text-align: right;
        padding-right: 20px
    }
    /*帖子 标题行*/
    .post_title{
        height: 44px;
        padding-top: 20px;
        box-sizing: content-box
    }

    /*贴吧信息下面的帖子模块*/
    .post_part{
        /*height: 3000px;*/
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        background-color: #f6f6f6;
        margin-top: 20px;
    }

    /*每条评论（包括1楼帖子信息）  左边的用户信息*/
    .left_user{
        /*border: solid 1px black;*/
        position: relative;
        padding-bottom: 42px
    }
    .left_user>div:nth-child(1){  /*头像*/
        margin-top: 30px;
    }
    .left_user>div:nth-child(2){  /*昵称*/
        margin-top: 20px;
    }
    .left_user>div:nth-child(3){  /*楼层*/
        margin-top: 5px;

    }
    .left_user>div:last-child{ /*右上角的楼主图片div*/
        height: 36px;
        width: 36px;
        position: absolute;
        right: 0;
        top: 0;
        background: no-repeat url('../../assets/images/host.png')  -172px -120px;
    }

    /*帖子所属贴吧模块*/
    .bar_info{
        height: 150px;
        border-radius: 12px;
    }

    /*贴吧 名称字体样式*/
    .my_el_link{
        color: #FF9800;
        font-size: 22px;
        margin-top: 25px;
    }

    /*贴吧描述字体*/
    .bar_desc{
        font-size: 14px;
        color: rgb(156, 156, 156);
    }
    /*贴吧人数*/
    .bar_peo_num{
        margin-top: 31px;
        margin-left: 122px;
    }
    /*贴吧帖子数*/
    .bar_post_num{
        margin-top: 8px;
        margin-left: 122px;
    }
</style>